<template>
  <div>
    <div class="row-header">
      <el-form :inline="true" label-width="150px" >
        <el-form-item label="卡号" >
          <el-input v-model="cardNumber" placeholder="请输入卡号" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="卡回收时间" >
          <el-date-picker
            v-model="time"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="mini" icon="el-icon-search" @click="beforeinitData">查询</el-button>
        <el-button type="shenda" size="mini" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div>
      <el-table
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        :data="tableData"
        ref="table"
        tooltip-effect="dark"
        class="row-main-table"
        v-loading.fullscreen="tableLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        @sort-change="changeSort"
      >
        <el-table-column
          sortable='custom'
          prop="id"
          label="流程号"
          align="center">
        </el-table-column>
        <el-table-column
          sortable='custom'
          prop="employeeName"
          label="操作人"
          align="center">
        </el-table-column>
        <el-table-column
          sortable='custom'
          prop="startNumber"
          label="起始业务号码"
          align="center"/>
        <el-table-column
          sortable='custom'
          prop="endNumber"
          label="结束业务号码"
          align="center"/>
        <el-table-column
          prop="insertTimeDate"
          label="操作时间"
          align="center"/>
        <el-table-column
          prop="remark"
          label="备注"
          align="remark">
          <template slot-scope="scope">
            <span v-if="scope.row.remark">{{scope.row.remark}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :page-count='maxPage'
          :total="totalPage"
          :page-sizes="[10,20,50,100]"
          background
          class="row-main-pager"></el-pagination>
      </div>
    </div>
  </div>


</template>

<script>
  import { processBackList } from '@/api/getData'

  export default {
    name: 'Home',
    data() {
      return {
        cardNumber: '',
        startTime: '',
        endTime: '',
        pageSize: 10,
        currentPage: 1,
        tableLoading: false,
        maxPage: 1,
        totalPage: 0,
        tableData: [],
        ascs: [],
        descs: [],
        time: '',
      }
    },

    created() {
      this.processHeadList()
    },
    methods: {
      // 搜索页数充值
      beforeinitData(loading) {
        this.currentPage = 1
        this.processHeadList(loading)
      },
      // 重置
      resetForm() {
        this.cardNumber = '';
        this.time = [];
      },

      changeSort(column) {
        //console.log(column);
        if (column.order == 'ascending') {
          this.descs = []
          this.ascs = [column.prop];
        } else {
          this.ascs = []
          this.descs = [column.prop];
        }
        this.processHeadList();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.processHeadList()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.processHeadList()
      },

      // 大流程列表
      async processHeadList() {
        this.tableLoading = true;
        let startTime = '';
        let endTime = '';
        if(this.time){
          startTime = this.time[0];
          endTime = this.time[1];
        }
        const returnData = await processBackList({
            cardNumber: this.cardNumber,
            startTime: startTime,
            endTime: endTime,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = []
        if (returnData._result) {
          this.tableLoading = false
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total;
          this.tableData = returnData.data.records;
          this.tableLoading = false
        }
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .disabledList-title {
    font-weight: bold;
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
  }

  .disabledList-tableTitle {
    font-weight: bold;
    color: #606266;
  }

  .block {
    text-align: right;
  }

  .el-dropdown-link {
    font-size: 20px;
    cursor: pointer;
  }

  .el-popper[x-placement^=bottom] {
    margin-right: -51px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 5px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
</style>
